<template>
  <div class="container">
    <div class="layout">
      <h3 class="title">智慧交通管理系统</h3>
      <!-- 登录界面 -->
      <el-tabs type="border-card">
        <el-tab-pane label="登录">
          <el-form
            class="login_form"
            ref="signFormRef"
            :model="signForm"
            status-icon
            :rules="signRules"
            label-width="80px"
            style="max-width: 460px"
            @keyup.enter.native="submitForm"
          >
            <el-form-item label="用户名" prop="username">
              <el-input v-model="signForm.username" type="text" autocomplete="off" autofocus />
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                v-model="signForm.password"
                type="password"
                autocomplete="off"
                show-password
              />
            </el-form-item>
            <el-form-item class="btn">
              <el-button type="primary" @click="submitForm">登录</el-button>
              <el-button type="primary" @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance()
const $router = useRouter()
//登录
const signForm = ref({
  username: '',
  password: ''
})
const signFormRef = ref()
const signRules = ref({
  username: [
    { required: true, message: '用户名不能为空', trigger: 'blur' },
    { min: 3, max: 7, message: '用户名长度为3-7个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '密码不能为空', trigger: 'blur' },
    { min: 3, max: 7, message: '密码长度为3-7个字符', trigger: 'blur' }
  ]
})

// 登录按钮
const submitForm = () => {
  signFormRef.value.validate((valid) => {
    if (valid) {
      proxy.$http.post(`/login`, signForm.value).then((res) => {
        if (res.code == 0) {
          //登录成功,在头文件中增加一个authization值
          localStorage.setItem('isLogin', 1)
          localStorage.setItem('authorization', res.result.token)
          localStorage.setItem('user_type', res.result.user_type)
          localStorage.setItem('use_id', res.result.use_id)
          localStorage.setItem('user_name', signForm.value.username)
          // 发生请求修改该用户的登录状态（put)
          proxy.$http.put(`/user/${res.result.use_id}`, {
            user_onlinestatus: '已登录'
          })
          $router.push('/home')
          ElMessage({
            message: '登录成功',
            type: 'success',
            duration: 1500
          })
        } else if (res.code == 10001) {
          ElMessage({
            message: '用户名或密码错误',
            type: 'error',
            duration: 1500
          })
        } else {
          ElMessage({
            type: 'error',
            message: '没有登录权限，请与管理员沟通',
            duration: 1500
          })
        }
      })
    }
  })
}
// 重置按钮
const resetForm = () => {
  if (!signFormRef.value) return
  signFormRef.value.resetFields()
}
</script>

<style scoped>
.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url('@/assets/images/bg.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;
}
.login_form {
  text-align: center;
}
.layout {
  position: absolute;
  left: calc(50% - 200px);
  top: 20%;
  width: 400px;
  opacity: 0.88;
}
.container .title {
  margin: 0px auto 40px 95px;
  font-size: 26px;
  font-weight: 700;
  align-items: center;
  color: #fff;
}
.forgot_password {
  font-size: 10px;
  margin-left: 9px;
  color: blue;
}

.btn {
  margin-left: 60px;
}
</style>
